<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick()" type="border-card">
      <el-tab-pane label="核心数据" name="first">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
        ></statistics-data>
      </el-tab-pane>
      <!-- <el-tab-pane label="创作者占比" name="second">
        <div style="display:flex">
          <p>近30日发布过选项内容的人数：</p>
          <el-select v-model="type" placeholder="作品类型" multiple @change="changeType">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <p>比较池：</p>
          <el-select v-model="compare" placeholder="比较池" @change="changePool" :clearable="true">
            <el-option
              v-for="item in poolOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <pie-chart :series="series" :seriesName="seriesName" v-if="flag"></pie-chart>
      </el-tab-pane> -->
      <el-tab-pane label="创作者排名" name="third">
        <search-list
          :api-url="$url.StatisCreatorRank"
          :option="searchOpt"
          :itemPerRow="8"
          ref="rankList"
          v-if="activeName == 'third'"
          :beforeQuery="beforeQuery"
        >
          <el-table-column prop="nickName" label="昵称"></el-table-column>
          <el-table-column prop="workCnt" label="作品数"></el-table-column>
          <el-table-column prop="fansCnt" label="粉丝量"></el-table-column>
          <el-table-column prop="viewCnt" label="被浏览量"></el-table-column>
          <el-table-column prop="favorCnt" label="被收藏量"></el-table-column>
          <el-table-column prop="shareCnt" label="被分享量"></el-table-column>
        </search-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import StatisticsData from 'comp/StatisticsData';
  // import PieChart from 'comp/PieChart';
  export default {
    components: {
      StatisticsData,
      // PieChart,
    },
    data() {
      return {
        activeName: 'first',
        coreData: {},
        xAxis: [],
        yAxis: [],
        seriesName: '',
        series: [],
        legend: [],
        flag: false,
        tableLoadData: [],
        tableHeadConfig: [],
        modelVal: '',
        compare: '0' || '',
        type: ['1'] || [],
        isAll: 1,
        typeOptions: [
          {
            value: '1',
            label: '视频',
          },
          {
            value: '2',
            label: '文章',
          },
          {
            value: '3',
            label: '图片',
          },
        ],
        poolOptions: [
          {
            value: '0',
            label: '近30日的MAU',
          },
          {
            value: '1',
            label: '近30日的月登录用户数',
          },
          {
            value: '2',
            label: '全部创作者',
          },
        ],
        searchOpt: [
          {
            type: 'allSl',
            name: 'isAll',
            label: '累计数据',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'time',
            label: '时间',
            conf: {
              type: 'daterange',
              format: 'yyyy-MM-dd',
              'value-format': 'yyyy-MM-dd',
              placeholder: '时间',
            },
          },
          {
            type: 'orderSelect',
            name: 'order',
            label: '排序',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'searchKey',
            label: '用户昵称',
          },
        ],
      };
    },
    created() {
      this.handleClick();
    },
    watch: {
      modelVal(newval) {
        var startTime = newval.dataVal[0];
        var endTime = newval.dataVal[1];
        this.handleClick(startTime, endTime);
      },
    },
    methods: {
      changeType(data) {
        this.type = data;
        this.getPieData();
      },
      changePool(data) {
        this.compare = data;
        this.getPieData();
      },
      handleClick(startTime, endTime) {
        this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
        this.flag = false;
        this.tableLoadData = [];
        this.tableHeadConfig = [];
        this.legend = [];
        this.yAxis = [];
        this.xAxis = [];
        this.series = [];
        if (this.activeName == 'first') {
          this.$service.StatisCreatorCore().then((res) => {
            this.coreData.data = {};
            this.coreData.data.publishCnt = res.publishCnt;
            this.coreData.data.creatorCnt = res.userCnt;
          });
          this.$service
            .StatisCreatorCoreChart({
              startDate: startTime,
              endDate: endTime,
            })
            .then((res) => {
              this.tableLoadData = res.dayData;
              this.tableHeadConfig = this.$ENUMS.creator;
              this.legend = this.$ENUMS.creatorLegend;
              var Cnts = [[], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.userCnt);
                Cnts[1].push(item.publishCnt);
                Cnts[2].push(item.publishAvg);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: 'line',
                  data: cnt,
                  yAxisIndex: index == 2 ? Cnts.length - 1 : null,
                };
                var y = {
                  type: 'value',
                  min: 0,
                  position: Cnts.length == index + 1 ? 'right' : 'left',
                };
                this.yAxis.push(y);
                this.series.push(serie);
                console.log(serie);
              });
              this.flag = true;
            })
            .catch((err) => {});
        }
        if (this.activeName == 'second') {
          this.getPieData();
        }
      },
      getPieData() {
        this.flag = false;
        this.$service
          .StatisCreatorRatio({
            compare: this.compare,
            workTypes: this.type.toString() || '1,2,3',
          })
          .then((res) => {
            res.list.forEach((element) => {
              if (element.name == '用户数') {
                element.name = '其他';
              }
            });
            res.list[0].value -= res.list[1].value;
            this.series = [
              {
                name: '',
                type: 'pie',
                radius: '50%',
                data: res.list,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ];

            this.flag = true;
          })
          .catch((err) => {});
      },
      beforeQuery({ searchInfo }) {
        if (searchInfo.time) {
          var arryTime = searchInfo.time;
          searchInfo.startDate = arryTime[0];
          searchInfo.endDate = arryTime[1];
        }
        searchInfo.isAll = searchInfo.isAll || this.isAll;
        if (searchInfo.order == '') {
          searchInfo.order = 0;
        }
        this.$refs.rankList.s_pagination.size = 20;
        console.log(searchInfo);
      },
    },
  };
</script>
<style lang="less" scoped></style>
